<!--  -->
<template>
  <el-container>
    <el-header>
      <a
        class="site-logo"
        href="http://www.meituan.com"
      >美团网</a>
    </el-header>
    <el-main style="padding:0;">

      <img
        src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg"
        width="480"
        height="370"
        alt="美团网"
      >
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <p style='line-height:50px;'><span>账户登录</span><span>手机动态码登陆<i class="el-icon-phone"></i></span></p>
        <el-form-item
          label=""
          prop="username"
        >
          <el-input
            type="string"
            v-model="ruleForm2.username"
            autocomplete="off"
            placeholder="手机号/用户名/邮箱"
            prefix-icon="el-icon-mobile-phone"
          ></el-input>
        </el-form-item>

        <el-form-item
          label=""
          prop="checkPass"
        >
          <el-input
            type="password"
            v-model="ruleForm2.pass"
            autocomplete="off"
            placeholder="密码"
            prefix-icon="el-icon-document"
          ></el-input>
          <p class="forget"><span v-if="error">{{error}}</span>忘记密码?</p>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm"
          >登 陆</el-button>

        </el-form-item>

        <p class="nocard">还没有账号？<nuxt-link to='/register'>免费注册</nuxt-link>

        </p>
        <p style="padding-left:150px;">-----用合作网站账号登录-----</p>
        <a
          class="oauth__link oauth__link--qq"
          href="/account/connect/tencent"
          data-mtevent="{&quot;la&quot;:&quot;oauth/qq&quot;}"
          target="_blank"
        ></a>
      </el-form>

    </el-main>
    <el-footer>
      <ul>
        <li>
          <nuxt-link to='/my'>关于美团
          </nuxt-link>
        </li>
        <li class="shu">丨</li>
        <li>
          <nuxt-link to='/my'>加入我们
          </nuxt-link>
        </li>
        <li class="shu">丨</li>
        <li>
          <nuxt-link to='/my'>商家入驻
          </nuxt-link>
        </li>
        <li class="shu">丨</li>
        <li>
          <nuxt-link to='/my'>帮助中心
          </nuxt-link>
        </li>
        <li class="shu">丨</li>
        <li>
          <nuxt-link to='/my'>美团手机版
          </nuxt-link>
        </li>
      </ul>
      <p>©2018 美团网团购 meituan.com 京ICP证070791号 京公网安备11010502025545号</p>
    </el-footer>
  </el-container>

</template>

<script>
import CryptoJS from "crypto-js";
export default {
  layout: "blank",
  data() {
    return {
      error: "",
      ruleForm2: {
        username: "",
        pass: ""
      },
      rules2: {
        username: [{ require: true, message: "请输入用户名", trigger: "blur" }],
        pass: [{ require: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$axios
        .post("/users/signin", {
          username: window.encodeURIComponent(this.ruleForm2.username),
          password: CryptoJS.MD5(this.ruleForm2.pass).toString()
        })
        .then(({ status, data }) => {
          if (status === 200) {
            if (data && data.code === 0) {
              location.href = "/";
            } else {
              this.error = data.msg;
            }
          } else {
            this.error = `服务器出错，错误码${status}`;
          }
          setTimeout(() => {
            this.error = "";
          }, 3000);
        });
    }
  }
};
</script>
<style lang='scss' scoped>
.el-container {
  background-color: #fff;
}
.el-header {
  margin: 40px auto 0;
  width: 980px;
  height: 54px;
  background-position: -188px -808px;
  background-image: url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-normal.2ee5c09.png);
  background-size: initial;
  float: left;
  display: block;
  display: inline;
  text-indent: -9999px;
  overflow: hidden;
  a {
    width: 80px;
    height: 100%;
  }
}
.el-main {
  width: 980px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
  .demo-ruleForm {
    p {
      display: flex;
      justify-content: space-between;
      padding-left: 100px;
    }
    .el-form-item__content {
      // el-form-item__content
      width: 302px;
      margin-left: 0 !important;
    }
    .el-input {
      width: 320px !important;
    }
    .forget {
      padding-left: 250px;
    }
    .el-button {
      width: 100%;
      background-color: rgb(45, 175, 189);
      border-color: #109085;
      font-weight: 700;
      height: 35px;
    }
    .nocard {
      display: flex;
      justify-content: flex-start;
      padding-left: 100px;
    }
  }
}
.el-footer {
  font-size: 12px;
  font-family: initial;
  margin-top: 30px;
  ul {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    .shu {
      padding: 0 10px;
      font-weight: 100;
      color: #ccc;
    }
  }
}
</style>
